<template>
    <div class="chart-wrapper">
        <div class="chart-area">
            <div class="line-box">
                <div id="lineChartId" class="line-chart"></div>
            </div>
            <div class="bar-box">
                <div id="barChartId" class="bar-chart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "chartComponent",
    components: {},
    props: {
        lineData: {
            type: Array,
            default: () => [],
        },
        barData: {
            type: Array,
            default: () => [],
        },
    },
    mounted() {
        window.onresize = () => {
            if (this.lineChartDom) {
                this.lineChartDom.resize();
            }
            if (this.barChartDom) {
                this.barChartDom.resize();
            }
        };
    },
    destroyed() {
        const lineChart = echarts.getInstanceByDom(
            document.getElementById("lineChartId")
        );
        const barChart = echarts.getInstanceByDom(
            document.getElementById("barChartId")
        );
        if (lineChart) {
            echarts.dispose(lineChart);
        }
        if (barChart) {
            echarts.dispose(barChart);
        }
    },
    data() {
        return {
            lineChartDom: null,
            barChartDom: null,
        };
    },
    methods: {
        initLineChart() {
            const chartDom = document.getElementById("lineChartId");
            const chart = echarts.getInstanceByDom(chartDom);
            if (chart === null || chart === undefined) {
                this.lineChartDom = echarts.init(chartDom);
            }
            // 构造数据
            const labelList = ["北京", "上海", "广州", "深圳"];
            const seriesData = labelList.map((item, index) => {
                return {
                    name: item,
                    type: "line",
                    stack: "Total",
                    data: this.lineData[index],
                };
            });
            const option = {
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: labelList,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    right: 20,
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
                yAxis: {
                    type: "value",
                },
                series: seriesData,
            };
            this.lineChartDom.setOption(option);
        },
        initBarChart() {
            const chartDom = document.getElementById("barChartId");
            const chart = echarts.getInstanceByDom(chartDom);
            if (chart === null || chart === undefined) {
                this.barChartDom = echarts.init(chartDom);
            }
            // 构造数据
            const labelList = ["北京", "上海", "广州", "深圳", "南京", "杭州"];
            const seriesData = labelList.map((item, index) => {
                return {
                    name: item,
                    type: "bar",
                    stack: "total",
                    label: {
                        show: true,
                    },
                    emphasis: {
                        focus: "series",
                    },
                    data: this.barData[index],
                };
            });
            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow", // shadow / line
                    },
                },
                legend: {},
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                },
                yAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                },
                series: seriesData,
            };
            this.barChartDom.setOption(option);
        },
    },
};
</script>

<style lang="less" scoped>
.chart-wrapper {
    .chart-area {
        display: flex;
        .line-box,
        .bar-box {
            flex: 1;
        }
        .line-chart {
            width: 600px;
            height: 400px;
        }
        .bar-chart {
            width: 600px;
            height: 400px;
        }
        margin-bottom: 20px;
    }
}
</style>
